<template>
  <!-- 基础题库预览对话框 -->
  <el-dialog title="题目预览" :visible="isShow" width="900px" :before-close="handleClose">
    <el-row>
      <el-col :span="6">【题型】: {{ formQuestionType(detailData.questionType) }} </el-col>
      <el-col :span="6">【编号】: {{ detailData.id }}</el-col>
      <el-col :span="6">【难度】: {{ formDifficulty(detailData.difficulty) }}</el-col>
      <el-col :span="6">【标签】: {{ detailData.tags }}</el-col>
      <el-col :span="6">【学科】: {{ detailData.subjectName }}</el-col>
      <el-col :span="6">【目录】: {{ formDirectory(detailData.catalogID) }}</el-col>
      <el-col :span="6">【方向】: {{ detailData.direction }}</el-col>
    </el-row>
    <hr>
    <span>【题干】:</span>
    <div style="color:blue" v-html="detailData.question" />
    <div v-if="detailData.questionType !== '3'">
      <div style="padding-bottom: 5px;">{{ formQuestionType(detailData.questionType) }}题 选项:（以下选中的选项为正确答案）</div>
      <div v-for="item in detailData.options" :key="item.id" style="padding: 8px 0px;">
        <el-radio v-if="detailData.questionType === '1'" v-model="isRight" :label="item.isRight">{{ item.title }}</el-radio>
        <el-checkbox-group v-else v-model="checkList">
          <el-checkbox :label="item.isRight">{{ item.title }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <hr>
    <span> 【参考答案】: </span>
    <el-button type="danger" @click="previewVideo">
      <span>视频答案预览</span>
    </el-button>
    <div v-show="detailData.videoURL" :style="{display:isShowVideo}">
      <video v-if="isPlay" :src="detailData.videoURL" controls class="video" />
    </div>
    <hr>
    <span> 【答案解析】: </span>
    <div style="display: inline-block;" v-html="detailData.answer" />
    <hr>
    <span> 【题目备注】: </span>
    <div style="display: inline-block;" v-html="detailData.remarks" />
    <div slot="footer" class="btn_footer">
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  // 名称
  name: 'MyPreviewQusetionBox',
  props: {
    // 试题详情对象
    detailData: {
      type: Object,
      required: true
    },
    // 预览弹窗的显示和隐藏
    isShow: {
      type: Boolean,
      required: true
    },
    directoryList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 多选框选中
      checkList: [1],
      // 单选框试题选中
      isRight: 1,
      // 是否显示视频
      isShowVideo: 'none',
      // 是否播放
      isPlay: false,
      difficulty,
      questionType
    }
  },
  methods: {
    // 视频答案预览
    previewVideo () {
      this.isShowVideo = 'block'
      this.isPlay = true
    },
    // 弹窗关闭
    handleClose () {
      this.$emit('update:isShow', false)
      this.isPlay = false
    },
    // 格式化难度
    formDifficulty (df) {
      const info = this.difficulty.find(item => Number(item.value) === Number(df))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 格式化题型
    formQuestionType (qt) {
      const info = this.questionType.find(item => Number(item.value) === Number(qt))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 格式化目录
    formDirectory (dt) {
      const info = this.directoryList.find(item => Number(item.id) === Number(dt))
      if (info) {
        return info.directoryName
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.btn_footer {
  text-align: right !important;
}
.video {
  width: 400px;
  height: 300px;
  margin-top: 20px;
}
.el-col-6 {
  width: 25%;
  padding: 10px 0;
}
</style>
